<script setup>
import { ref, computed } from 'vue'
import { useStudentStore } from '../../stores/student'

const studentStore = useStudentStore()

const emit = defineEmits(['confirm'])

// 表单数据
const form = ref({
  points: 0
})

// 对话框可见性
const dialogVisible = ref(false)

// 当前学生信息
const currentStudent = computed(() => studentStore.currentStudent)

// 初始化表单
const initForm = () => {
  if (currentStudent.value) {
    form.value.points = currentStudent.value.points || 0
  } else {
    form.value.points = 0
  }
}

// 打开对话框
const openDialog = () => {
  initForm()
  dialogVisible.value = true
}

// 确认修改
const handleConfirm = () => {
  emit('confirm', form.value)
  dialogVisible.value = false
}

// 常用积分选项
const commonPoints = [10, 50, 100, 200, 500, 1000]

// 快速设置积分
const setPoints = (points) => {
  form.value.points = points
}

// 对外暴露方法
defineExpose({
  openDialog
})
</script>

<template>
  <el-dialog
    title="修改积分"
    v-model="dialogVisible"
    width="450px"
  >
    <div class="points-dialog">
      <el-alert
        v-if="currentStudent"
        type="info"
        :closable="false"
        class="student-info"
      >
        学生: {{ currentStudent.name }} ({{ currentStudent.account }}), 当前积分: {{ currentStudent.points }}
      </el-alert>
      
      <el-form :model="form" label-width="100px" class="points-form">
        <el-form-item label="积分">
          <el-input-number 
            v-model="form.points" 
            :min="0" 
            :max="9999"
            controls-position="right"
            style="width: 150px"
          />
        </el-form-item>
        
        <div class="quick-select">
          <span class="label">快速选择：</span>
          <div class="point-buttons">
            <el-button
              v-for="point in commonPoints"
              :key="point"
              size="small"
              :type="form.points === point ? 'primary' : ''"
              @click="setPoints(point)"
            >
              {{ point }}
            </el-button>
          </div>
        </div>
      </el-form>
    </div>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.points-dialog {
  padding: 10px;
}

.student-info {
  margin-bottom: 20px;
}

.quick-select {
  display: flex;
  margin-top: 12px;
  margin-left: 100px;
}

.label {
  font-size: 14px;
  color: var(--el-text-color-regular);
  margin-right: 8px;
  flex-shrink: 0;
  line-height: 32px;
}

.point-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

:deep(.el-input-number__decrease),
:deep(.el-input-number__increase) {
  background-color: var(--el-fill-color-light);
  border-color: var(--el-border-color);
  color: var(--el-text-color-regular);
}

:deep(.el-input__wrapper) {
  background-color: var(--el-bg-color);
  box-shadow: 0 0 0 1px var(--el-border-color) inset;
}

:deep(.el-form-item__label) {
  color: var(--el-text-color-regular);
}

:deep(.el-button.is-text) {
  color: var(--el-text-color-regular);
}

:deep(.el-button.is-text:not(.is-disabled):hover) {
  background-color: var(--el-fill-color-dark);
}
</style>
